<template>
  <div class="payment">
    <Card>
      <p class="title" slot="title">代付订单</p>
      <Row class="input-form">
        <div class="input-form-item">
          <div class="input-item-inline">
            <Date-picker size="large" class="myinput" type="date" placeholder="开始时间"></Date-picker>
          </div>
          <div class="input-item-inline">
            <Date-picker size="large" class="myinput" type="date" placeholder="结束时间"></Date-picker>
          </div>
          <div class="input-item-inline">
            <Input size="large" clearable placeholder="账号名" type="search" class="myinput" />
          </div>
          <div class="input-item-inline">
            <Input size="large" clearable placeholder="转账单号" type="search" class="myinput" />
          </div>
          <Button size="large" class="btns " type="success">
            <Icon  type="search" />搜索</Button>
        </div>
      </Row>
      <Button size="large" class="btns" type="success">
        <Icon  type="search" />一键提交(已付款)</Button>
      <Button size="large"  class="btns" type="success">
        <Icon type="search" />生成Excel表(受理中)</Button>
      <Button size="large" class="btns" type="success">
        <Icon type="search" />一键提交(转账失败)</Button>
      <Button size="large" class="btns" type="success">
        <Icon type="search" />一键提交(受理)</Button>
      <div class="record">
        订单数:<span style="color: blue;">20</span>
        待付金额:<span style="color: blue;">￥8902</span>
        代付费用:<span style="color: green;">￥18</span>
        扣减金额:<span style="color: green;">￥8902</span>
      </div>
      <i-table  size="large" :columns="columns1" :data="data1"></i-table>
    </Card>

  </div>
</template>

<script>
export default {
  name: 'tools_methods_page',
  data () {
    return {
      columns1: [{
        type: 'selection',
        width: 30,
        align: 'center'
      }, {
        title: '操作',
        key: 'action',
        width:150
      },
      {
        title: '商户ID',
        key: 'id'
      },
      {
        title: '转账单号',
        key: 'transfer'
      },
      {
        title: '账户名',
        key: 'accountname'
      },
      {
        title: '账户',
        key: 'account'
      },
      {
        title: '银行名称',
        key: 'blankname'
      }
      ],
      data1: [{
        action: '',
        id: 18,
        transfer: '123456',
        accountname:'硕硕',
        account:'654321',
        blankname:'农业银行'
      },
      {
        name: '张小刚',
        age: 25,
        address: '北京市海淀区西二旗'
      },
      {
        name: '李小红',
        age: 30,
        address: '上海市浦东新区世纪大道'
      },
      {
        name: '周小伟',
        age: 26,
        address: '深圳市南山区深南大道'
      }
      ]
    }
  }
}
</script>

<style lang="less">
  @import './tools-methods.less';

  .btns {
    display: inline-block;
    height: 35px;
    line-height: 35px;
    padding: 0 12px;
    background-color: #009688;
    color: #fff;
    white-space: nowrap;
    text-align: center;
    font-size: 14px;
    border: none;
    border-radius: 2px;
    cursor: pointer;
  }

  .btns+.btns {
    margin-left: 10px;
  }
</style>
